/**************************************
 *
 * VLOOK CSS 多主题间的通用样式
 * (配合 base.less、主题.less 进行使用)
 *
 * V24.2
 * 2024-05-21
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * Telegram Channel: t.me/vlook_markdown
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

// -----
// #Common_LESS_Var
@themeEmail: "maxchow@qq.com";

@tableRowNumTop: 4px; // 表格逐行自动编号的高度
@tableRowCursor: "▶️"; // 表格当前行鼠标 hover 游标
// @tableCellPadding: 8px; // 表格单元格边距
@focusCursor: "✏️"; // 编辑焦点行游标
@focusStyle: @aBorderWidth dashed @aLineColor; // 焦点、焦点行样式
@miniLineHeight: 1;
@defaultLineHeight: 1.5;
@paragraphPadding: .5em;//.75em;//.625em; // 段落空白
@paragraphInnerLineHeight: 1.5;
@figurePadding: 20px; // 插图内、间、行空白
@hoverBrightness: 90%;
@scrollFix: 8px; // 针对 Mermaid 图表，不添加会导致出现滚动条
@syntaxTipsFont: italic normal 10px/1 var(--v-f-fm-bd); // 语法提示字体设置

// 目录、文件 的当前节点、点击节点样式
@tocItemActive_boxShadow: 0 0 0 2px fade(@headerColor, 50%);
@tocItemCurrent_boxShadow: 0 0 0 2px fade(@headerColor, 50%) inset;

// 图片、插图边框宽度
@imgBorderWidth: 2px;//@aBorderWidth;//2px;

 // --------------------
// 主题的文档纹理背景
// 格子
@docBgImgLight_Grid: url("");
@docBgImgDark_Grid: url("");
// 双重格子
@docBgImgLight_Grid2: url("");
@docBgImgDark_Grid2: url("");
// 斜纹
@docBgImgLight_Twill: url("");
@docBgImgDark_Twill: url("");
// 反斜纹
@docBgImgLight_Twill_R: url("");
@docBgImgDark_Twill_R: url("");
// 电路
@docBgImgLight_EC: url("");
@docBgImgDark_EC: url("");
// 波浪
@docBgImgLight_Wave: url("");
@docBgImgDark_Wave: url("");
// 雪花
@docBgImgLight_Snow: url("");
@docBgImgDark_Snow: url("");

// 1-6 级标题前缀/自动编号内容
// counter() 支持使用有序列表的符号格式（decimal/lower-roman/upper-roman/lower-alpha/upper-alpha），如：counter(h1, upper-alpha)
@ChpAutoNum: on;
@h1BeforeContent: counter(h1) ". ";
@h2BeforeContent: counter(h1) "." counter(h2) " ";
@h3BeforeContent: counter(h1) "." counter(h2) "." counter(h3) " ";
@h4BeforeContent: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " ";
@h5BeforeContent: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " ";
@h6BeforeContent: "◼︎ ";

// 题注文字、背景色
@captionTextColor: var(--d-fc);
@captionBackground: var(--tbl-td-bg);

// 表格边框
@tblBdWidth: 2px;
@tableBorderColor: var(--tbl-bd);
@tableBorderWidth: @tblBdWidth;
@tableBorderLeftWidth: @tblBdWidth;
@tableBorderRightWidth: @tblBdWidth;
@tableBorderTopWidth: @tblBdWidth;
@tableBorderBottomWidth: @tblBdWidth;
@tableThBorderRightWidth: 1px;
@tableTdBorderRightWidth: 1px;
// 表格行 hover
@tableTrHoverBg: fade(@aHoverColor, 20%);
@tableTrHoverBgDark: fade(@aHoverColor, 40%);
// 表格圆角
@tableBorderRadius: var(--v-r-b);
// 表格背景
@tableBackground: var(--d-bc);
@tableThColor: inherit;
@tableThBackground: var(--tbl-th-bg);
@tableTdBackground: var(--tbl-td-bg);
// 表格单元格阴影
@tableFirstThBoxShadow: 0 1px 0 var(--tbl-cell-bd);
@tableThBoxShadow: @tableFirstThBoxShadow;
@tableThRepeaterBoxShadow: 0 -@tblBdWidth 0 var(--tbl-h-bd), @tableThBoxShadow;
@tableFirstTdBoxShadow: 0 -1px 0 0 var(--tbl-h-bd);
@tableTdBoxShadow: none;
// 表格十字光标颜色
@tableCrossBgColor: fade(@aLineColor, 30%);

// 标题的阴影样式
@h1Shadow: none;
@h2Shadow: none;
@h3Shadow: none;
@h4Shadow: none;
@h5Shadow: none;
@h6Shadow: none;

// 标题的文字阴影样式
@h1TextShadow: none;
@h2TextShadow: none;
@h3TextShadow: none;
@h4TextShadow: none;
@h5TextShadow: none;
@h6TextShadow: none;

// 标题的文字字体大小
@h1FontSize: 1.75em;
@h2FontSize: 1.625em;
@h3FontSize: 1.5em;
@h4FontSize: 1.375em;
@h5FontSize: 1.25em;
@h6FontSize: 1.125em;

// 标题的文字轮廓样式
@h1TextStroke: initial;
@h2TextStroke: initial;
@h3TextStroke: initial;
@h4TextStroke: initial;
@h5TextStroke: initial;
@h6TextStroke: initial;

// 标题的左边框
@h1BorderLeft: 0;
@h2BorderLeft: 0;
@h3BorderLeft: 0;
@h4BorderLeft: 0;
@h5BorderLeft: 0;
@h6BorderLeft: 0;

// 标题的右边框
@h1BorderRight: 0;
@h2BorderRight: 0;
@h3BorderRight: 0;
@h4BorderRight: 0;
@h5BorderRight: 0;
@h6BorderRight: 0;

// 标题的上边框
@h1BorderTop: 0;
@h2BorderTop: 0;
@h3BorderTop: 0;
@h4BorderTop: 0;
@h5BorderTop: 0;
@h6BorderTop: 0;

// 标题的下边框
@h1BorderBottom: 0;
@h2BorderBottom: 0;
@h3BorderBottom: 0;
@h4BorderBottom: 0;
@h5BorderBottom: 0;
@h6BorderBottom: 0;

@headerLetterSpacing: 0;

// 标题边距
@headerPadding: 5px 0;
@h1Padding: @headerPadding;
@h2Padding: @headerPadding;
@h3Padding: @headerPadding;
@h4Padding: @headerPadding;
@h5Padding: @headerPadding;

// 标题内文本边距
@h1SpanPadding: 0;
@h2SpanPadding: 0;
@h3SpanPadding: 0;
@h4SpanPadding: 0;
@h5SpanPadding: 0;

// 标题圆角
@headerBorderRadius:  var(--v-r-b);
@h1BorderRadius: @headerBorderRadius;
@h2BorderRadius: @headerBorderRadius;
@h3BorderRadius: @headerBorderRadius;
@h4BorderRadius: @headerBorderRadius;
@h5BorderRadius: @headerBorderRadius;

// 标题内文本圆角
@h1SpanBorderRadius: 0;
@h2SpanBorderRadius: 0;
@h3SpanBorderRadius: 0;
@h4SpanBorderRadius: 0;
@h5SpanBorderRadius: 0;

// 标题背景
@headerBackground: none;
@h1Bg: @headerBackground;
@h2Bg: @headerBackground;
@h3Bg: @headerBackground;
@h4Bg: @headerBackground;
@h5Bg: @headerBackground;

// 标题颜色
@h1Color: var(--h-f);//@headerColor;
@h2Color: var(--h-f);//@headerColor;
@h3Color: var(--h-f);//@headerColor;
@h4Color: var(--h-f);//@headerColor;
@h5Color: var(--h-f);//@headerColor;
@h6Color: var(--h-f);//@headerColor;

// 标题颜色渐变时配置
@lgH1Bg: none;
@lgH2Bg: none;
@lgH3Bg: none;
@lgH4Bg: none;
@lgH5Bg: none;
@lgH1BgClip: inherit;
@lgH2BgClip: inherit;
@lgH3BgClip: inherit;
@lgH4BgClip: inherit;
@lgH5BgClip: inherit;
// @lgHeaderColor: @headerColor;
@lgH1Color: var(--h-f);
@lgH2Color: var(--h-f);
@lgH3Color: var(--h-f);
@lgH4Color: var(--h-f);
@lgH5Color: var(--h-f);

// 标题前缀 before 颜色
// @contentH1NumColor: @contentHeaderNumColor;
// @contentH2NumColor: @contentHeaderNumColor;
// @contentH3NumColor: @contentHeaderNumColor;
// @contentH4NumColor: @contentHeaderNumColor;
// @contentH5NumColor: @contentHeaderNumColor;
// @contentH6NumColor: @contentHeaderNumColor;

// 连续标题背景
@multiHeaderBG: none;

@h1Margin: 2em 0 0 0;
@h2Margin: 2em 0 0 0;
@h3Margin: 1.5em 0 0 0;
@h4Margin: 1.5em 0 0 0;
@h5Margin: 1.25em 0 0 0;
@h6Margin: 1em 0 0 0;

// 生成针对 h1-h6 标题内文本的扩展样式
// .genHeaderSpan(@header, @color, @background, @padding, @borderRadius) {
//     #write @{header}>span {
//         color: @color;
//         background: @background; // 该项因涉及到渐变文字颜色，不能作为所有主题的通用配置，须根据实际主题需要独立调用
//         padding: @padding;
//         border-radius: @borderRadius;
//     }
// }

// 标题对齐方式
@headerTextAlign: left;
@h1TextAlign: @headerTextAlign;
@h2TextAlign: @headerTextAlign;
@h3TextAlign: @headerTextAlign;
@h4TextAlign: @headerTextAlign;
@h5TextAlign: @headerTextAlign;
@h6TextAlign: @headerTextAlign;

// 多个连续标题间的距离
@hContinuous: 0;

// 标签默认色号 --- 未合适
@tagBgDefaultColorCode: "t2";
@tagFgDefaultColorCode: ~"t2-a";

// 徽章默认色号 --- 未合适
@badgeBgDefaultColorCode: "gy";
@badgeFgDefaultColorCode: ~"gy-a";

// 引用块默认色号（与主题配套使用）
@quoteBgDefault: var(--blockquote-bg);
// @quoteBgDefault: var(--ac-t1-fade);

// 引用块边框宽度
@quoteBorderWidth: .25em;

// 引用块小标题、折叠引用块标题的分隔线宽度
@quoteTitleBorderWidth: 1px;

// 引用块左边框
@quoteBorderLeft: 0;
@quoteRadius: var(--v-r-b);

@theme1FadeDark: @theme1Fade;
@theme2FadeDark: @theme2Fade;

// 行内代码
@codeTextColor: @theme2;
@codeTextColorDark: @theme2Dark;
@codeBgColor: var(--d-bc-lg);
@codeBgColorDark: var(--d-bc-dk);

// 代码块背景图
@codeBlockBackground: none;
@codeBlockBackgroundDark: none;
@codeBlockBackgroundSize: auto;
@codeBlockBackgroundRepeat: inherit;
@codeBlockBackgroundPosition: inherit;

// 封面、封底标题的文字阴影样式
@coverTextShadow: none;
@backCoverTextShadow: none;

// 封面、封底标题的文字轮廓样式
@coverTextStroke: initial;
@backCoverTextStroke: initial;

// 生成表格、插图的不同对齐方式的样式
.genTableAndFigureAlign(@align) when (@align = center) {
    // 表格居中
    // :is(#write, body.typora-export) table {
    #write table {
        margin: 0 auto;
    }

    // 明信片
    content>#write .md-image[data-src*="#card"]>img,
    content>#write .md-image[data-src*="#cardd"]::after,
    #write .v-post-card,
    #write img[src*="#card"],
    #write svg[data-inject-url*="#card"],
    // 编辑时 Mermaid 图的预览
    .md-diagram-panel-preview>svg {
        margin: 0 auto;
        display: block;
    }

    // 列表分栏
    // #write @{hr_MdHr}+ul,
    // #write @{hr_MdHr}+ol,
    // 编辑时题注居中
    @nonFigure: ~':not(:is([data-src*="#icon"],[data-src*="#logo"],[data-src*="#frame"]))';
    content>#write p:has([md-inline="em"]:only-child>em>[md-inline="highlight"]>mark),
    content>#write p:has(>.md-image@{nonFigure}), // 段落内的图片
    content>#write p:has(>.md-link>a>.md-image@{nonFigure}), // 段落内带链接的图片
    #write .md-fences-adv-panel, // Mermaid 图
    .v-cap-cntr, // 导出后题注居中
    .v-caption.tbl>.v-cap-1 { // 表格题注样式
        text-align: center;
    }

    // 列表分栏下的列表项
    // #write @{hr_MdHr}+ul>li,
    // #write @{hr_MdHr}+ol>li {
    //     text-align: left;
    // }

    .v-cap-cntr.expander::before, // 折叠提示的样式居中
    #write .v-post-card, // 明信片样式
    .ty-table-edit { // 编辑时表格工具栏
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--v-r-b) var(--v-r-b) 0 0 !important;
    }
}
